<template>
  <div class="container">
    <div class="app-container">
      <el-card>
        <el-form>
          <el-form-item label="企业名称">
            <el-input v-model="name" placeholder="请输入企业名称" size="small" style="width: 400px;" clearable />
            <el-button type="primary" size="small" style="margin-left: 20px;" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" size="small">添加企业</el-button>
        <el-table :data="companyList.rows" style="width: 100%;" @expand-change="expandChange">
          <el-table-column type="expand">
            <template>
              <el-table style="margin-left: 50px;" :data="LeaseList">
                <!-- <template v-if="emptyShow" #empty>
                  <el-empty description="暂无数据" />
                </template> -->
                <el-table-column label="租赁楼宇" prop="buildingName" />
                <el-table-column label="租赁起止时间">
                  <template #default="scope">
                    {{ scope.row.startTime }} ~ {{ scope.row.endTime }}
                  </template>
                </el-table-column>
                <el-table-column label="合同状态">
                  <template #default="scope">
                    <el-tag v-if="scope.row.status===0" type="info">待生效</el-tag>
                    <el-tag v-if="scope.row.status===1" type="success">生效中</el-tag>
                    <el-tag v-if="scope.row.status===2" type="warning">已到期</el-tag>
                    <el-tag v-if="scope.row.status===3" type="danger">已退租</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button type="text" :disabled="scope.row.status === 3">续租</el-button>
                    <el-button type="text" :disabled="scope.row.status === 3">退租</el-button>
                    <el-button type="text" :disabled="scope.row.status !== 3">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column type="index" label="序号" width="100px" />
          <el-table-column prop="name" label="企业名称" />
          <el-table-column prop="contact" label="企业联系人" />
          <el-table-column prop="contactNumber" label="联系电话" />
          <el-table-column label="操作">
            <template>
              <el-button type="text">添加合同</el-button>
              <el-button type="text">查看</el-button>
              <el-button type="text">编辑</el-button>
              <el-button type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="params.page"
          :page-sizes="[10,20,30]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="companyList.total"
          style="text-align: right;margin-top: 20px;"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getCompanyList, getCompanyLeaseList } from '@/api/park'
export default {
  name: 'EnterprisePage',
  components: {},
  props: {},
  data() {
    return {
      id: '',
      name: '',
      emptyShow: false,
      params: {
        page: 1,
        pageSize: 10,
        name: ''
      },
      companyList: {},
      LeaseList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getCompanyList()
  },
  mounted() {},
  methods: {
    async getCompanyList() {
      const res = await getCompanyList(this.params)
      this.companyList = res.data.data
      // console.log(this.companyList)
    },
    // 查询
    search() {
      this.params.name = this.name
      this.getCompanyList()
    },
    //
    async expandChange(row, expandedRows) {
      console.log(row)
      console.log(expandedRows)
      const res = await getCompanyLeaseList(row.id)
      console.log(res.data.data)
      if (res.data.data === 0) {
        this.emptyShow = true
      }
      this.LeaseList = res.data.data
      console.log(this.LeaseList)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
